<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取元素的样式</title>
    <style>
        #box1{
            /* width: 100px; */
            height: 100px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <br>
    <button id="btn01">点我一下</button>
</body>
</html>
<script>
    /*

    */
    // 点击按钮以后读取 box1 的样式
    var box1 = document.getElementById("box1");
    var btn01 = document.getElementById("btn01");
    btn01.onclick=function(){

        // 读取 box1 的宽度
        // alert(box1.style.width);

        /*
            获取元素当前显示的样式 ⭐currentStyle的🟡
                语法： 元素.currentStyle.样式名
            它可以用来读取当前元素正在显示的样式
                如果当前元素未设置样式，则获取他的默认值

            仅支持 IE ❗❗❗❗❗
        */
        // alert(box1.currentStyle.width);

        /*
            在其他浏览器可以使用    ⭐⭐⭐getComputedStyle()🟡
                getComputedStyle() 这个方法来获取元素当前的样式
                这个方法是 window 的方法，可以直接使用

            需要两个参数
                第一个： 需要获取样式的元素
                第二个： 可以传递一个为元素，一般都传 ⭐ null

            该方法会返回一个对象，对象中封装了当前元素对应的样式
                可以通过 对象.样式名 来获取样式
                如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                比如：没有设置 width，他不会获取到 auto ，而是一个当前长度

            但是该方法不支持 IE8 及以下浏览器 ❗❗❗

            两种方式读取到的样式都是只读的，不能修改❗❗❗
                如果需要修改，必须通过 style 属性 ⭐📌
        */

        // var obj = getComputedStyle(box1,null);
        // 正常浏览器 ⭐
        // alert(obj.backgroundColor);
        // IE8 浏览器 ⭐
        // alert(box1.currentStyle.backgroundColor);
        alert(getStyle(box1,"width"));
    };

    /*
        定义一个函数，用来获取指定元素的当前样式
        参数：
                obj 要获取样式的元素
                name 要获取的样式名
    */


    function getStyle(obj,name){
        // obj.name === obj["name"]
        return getComputedStyle(obj,null)[name];   // 此处与下面的 obj 是同样的道理
        // return obj.currentStyle[name];
    }

    var obj1={
        name:"孙悟空",
        kg:"80"
    };
    // alert(obj1.name === obj1["name"]);    
    // alert(obj1["kg"]);

</script>